<!--  -->
<template>
  <div class="faxian">
    <van-tabs v-model="active">
      <van-tab title="房间" id="fang">
        <ul>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00616-3678.jpg"
              alt=""
            />
            <p>客厅</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/applvyou/part-004513-231.jpg"
              alt=""
            />
            <p>书房和办公室</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00678-430.jpg"
              alt=""
            />
            <p>门厅</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00618-2203.jpg"
              alt=""
            />
            <p>户外</p>
          </li>
          <li>
            <img
              src="https://img1.baidu.com/it/u=768891870,255905995&fm=26&fmt=auto"
              alt=""
            />
            <p>宜家对公业务</p>
          </li>
          <li>
            <img
              src="https://t7.baidu.com/it/u=2975101025,3627505253&fm=193&f=GIF"
              alt=""
            />
            <p>浴室</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00053-394.jpg"
              alt=""
            />
            <p>儿童房</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=3765295458,44074858&fm=26&fmt=auto"
              alt=""
            />
            <p>3D房间</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00315-3950.jpg"
              alt=""
            />
            <p>卧室</p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="活动特惠" id="tehui">
        <ul>
          <li>
            <img
              src="https://img2.baidu.com/it/u=1879273986,1174859096&fm=26&fmt=auto"
              alt=""
            />
            <p>限时特惠</p>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/fb/05/fb050d6ff9a19460f6d71c9ba320253f.jpg?f=xxxs"
              alt=""
            />
            <p>更低价格</p>
          </li>
          <li>
            <img
              src="https://img1.baidu.com/it/u=4015156548,654753002&fm=26&fmt=auto"
              alt=""
            />
            <p>我们的超值低价</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=53978238,4058064843&fm=26&fmt=auto"
              alt=""
            />
            <p>会员特惠</p>
          </li>
        </ul>
      </van-tab>

      <van-tab title="服务" id="fuwu">
        <ul>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00060-670.jpg"
              alt=""
            />
            <p>全屋设计</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00050-933.jpg"
              alt=""
            />
            <p>厨房设计</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00116-788.jpg"
              alt=""
            />
            <p>对公业务</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00689-3427.jpg"
              alt=""
            />
            <p>免费订购沙发套小样</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=2447655644,1763841130&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=333"
              alt=""
            />
            <p>更多客户护服务</p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="家居灵感" id="linggan">
        <ul>
          <li>
            <img
              src="https://www.ikea.cn/images/96/cc/96cca7b9862aa2b9b8f8b73ac03755b8.jpg?f=xxl"
              alt=""
            />
            <p>家庭办公灵感</p>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/42/a9/42a92a5914df77b7cbb9f00c33bef5d8.jpg?f=xxl"
              alt=""
            />
            <p>卧室灵感</p>
          </li>
          <li>
            <img
              src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00233-2058.jpg"
              alt=""
            />
            <p>家装示例</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=3317445268,901751027&fm=15&fmt=auto"
              alt=""
            />
            <p>厨房灵感</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=2657876804,2586345812&fm=15&fmt=auto"
              alt=""
            />
            <p>客厅灵感</p>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/3e/a1/3ea16c092e5826f04bc052d3a3bb7854.jpg?f=xxxs"
              alt=""
            />
            <p>餐厅灵感</p>
          </li>
          <li>
            <img
              src="https://img1.baidu.com/it/u=2644124473,573878637&fm=26&fmt=auto"
              alt=""
            />
            <p>儿童房灵感</p>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/96/cc/96cca7b9862aa2b9b8f8b73ac03755b8.jpg?f=xxl"
              alt=""
            />
            <p>家庭办公灵感</p>
          </li>
          <li>
            <img
              src="https://img2.baidu.com/it/u=1136928082,2322413927&fm=26&fmt=auto"
              alt=""
            />
            <p>浴室灵感</p>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/fc/40/fc407a21abe40c316be7d3add4a2a9b9.jpg?f=xxl"
              alt=""
            />
            <p>门厅灵感</p>
          </li>
          <li>
            <img
              src="https://img1.baidu.com/it/u=3668622863,2998218591&fm=15&fmt=auto"
              alt=""
            />
            <p>户外灵感</p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="新品" id="xin">
        <ul>
          <li>
            <img
              src="https://www.ikea.com/ext/ingkadam/m/467fe15d24e30853/original/PH179411.jpg?f=xl"
              alt=""
            />
            <p>KARISMATISK 凯瑞斯玛 家的个性宣言</p>
          </li>
          <li>
            <img
              src="https://img0.baidu.com/it/u=107868145,2910301556&fm=26&fmt=auto"
              alt=""
            />
            <p>HÖSTKVÄLL 赫斯威 秋日系列</p>
          </li>
          <li>
            <img
              src="https://static.web.ikea.cn/static/images/search/Group.png"
              alt=""
            />
            <p>ENHET 安纳特 厨房系列</p>
          </li>
          <li>
            <img
              src="https://img1.baidu.com/it/u=1579811383,340734296&fm=26&fmt=auto"
              alt=""
            />
            <p>ENHET 安纳特 浴室系列</p>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      active: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
#fang {
  width: 100%;
  padding: 1em;
}
#fang img {
  width: 8.8em;
  border-radius: 0.3em;
  height: 5em;
}
#fang p {
  text-align: center;
  /* width: 85%; */
  font-size: 0.5em;
}
#fang li {
  float: left;
  width: 50%;
  height: 7rem;
  text-align: center;
}

#linggan {
  width: 100%;
  padding: 1em;
}
#linggan img {
  width: 8.8em;
  border-radius: 0.3em;
  height: 5em;
}
#linggan p {
  text-align: center;
  /* width: 85%; */
  font-size: 0.5em;
}
#linggan li {
  float: left;
  width: 50%;
  height: 7rem;
  text-align: center;
}

#tehui {
  width: 100%;
  padding: 1em;
}
#tehui img {
  width: 100%;
  border-radius: 0.3em;
}
#tehui p {
  text-align: center;
}

#fuwu {
  width: 100%;
  padding: 1em;
}
#fuwu img {
  width: 100%;
  border-radius: 0.3em;
}
#fuwu p {
  text-align: center;
}

#xin {
  width: 100%;
  padding: 1em;
}
#xin img {
  width: 100%;
  border-radius: 0.3em;
}
#xin p {
  text-align: center;
}
.van-tab__text {
  font-size: 12px;
}
</style>
